<template>
<div>
  <div v-transfer-dom>
    <x-dialog v-model="dialog" >
      <span class="iconfont icon-guanbi icon-close" @click="close"></span>
      <div class="payway-dialog">
        <div class="payway-title">付款方式:</div>
        <div class="payway">
          <div>
            <span :class="['btn-payway',currentIndex==1?'btn-select':'']" @click="itemClick(1)">款到发货</span>
            <span :class="['btn-payway',currentIndex==2?'btn-select':'']" @click="itemClick(2)">赊销</span>
          </div>
          <div  class="sell-credit display-flex align-items-center" >
            <group v-if="currentIndex==2">
              <flexbox justify="center" align="center">
                <flexbox-item :span="3"><span class="sell-credit-lable">赊销天数:</span></flexbox-item>
                <flexbox-item ><div class="vux-1px-b"><input class="normal-input"  type="number"   v-model="creditDay"   placeholder="请输入整数"/></div></flexbox-item>
                <flexbox-item :span="2"><span class="sell-credit-lable">天</span></flexbox-item>
              </flexbox>
            </group>
          </div>
        </div>
      </div>
      <div class="btn-comfirm-container">
        <div class="btn-comfirm  display-flex align-items-center justify-content-flex-center" @click="closeDialog"><span>确定</span></div>
      </div>
    </x-dialog>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
    export default{
      props:{
        defaultDialog: Boolean,
        customerId:Number|String,
        useType:{
          default:1,//商品详情使用
          type:Number
        },
        payWayInit:String
      },
      mounted(){
        this.dealPayWay();
      },
      watch:{
        payWayInit:function (newVal, oldVal) {
          this.payWay = newVal;
          this.dealPayWay();
        },
        dialog: function (newVal, oldVal) {
          this.dialog = newVal;
        }
      },
      data(){
        return {
          currentIndex:1,
          dialog:this.defaultDialog,
          creditDay:'',
          payWay:this.payWayInit
        }
      },
      methods:{
        dealPayWay(){

          if(this.payWay=='款到发货'||this.payWay==undefined){
              this.currentIndex=1;
          }else {
            this.currentIndex=2;
            var re1 =/(\d{1,3})+(?:\.\d+)?/g;
            var arr1 = this.payWay.match(re1);
            var value=parseInt(arr1[0]);
             this.creditDay=value;
          }
        },
        updatePayway(obj){
          this.$ajax.post("customer/update/payway",obj,(res)=>{
            console.log("=====res",res);
            if(res.code==200){
              this.$emit('payWayComfirm' ,{payWay:this.currentIndex,creditDay:this.creditDay});
              if(this.$fromApp(this)){
                let str=""
                if(this.currentIndex==1){
                  str="款到发货"
                }else if(this.currentIndex==2){
                    str="赊销"+this.creditDay+"天";
                }
                this.$callJava({code:1017,customerId:this.customerId,payWay:str,noBack:true})
              }
            }else{
              this.$vux.toast.text(res.msg, 'center');
            }
          })
        },
        itemClick(index){
          this.currentIndex=index;
        },
        showDialog(){
          this.dialog=true;
        },
        closeDialog(){
          let obj={customerId:this.customerId};
          if(this.currentIndex==1){
            obj.payWay=1;
          }else if(this.currentIndex==2){
            obj.payWay=2;
            obj.creditDay=this.creditDay;
            if(this.creditDay==''){
              this.$vux.toast.text('请输入赊销天数', 'center');
              return;
            }else if(!this.$checkIsNumber(this.creditDay)){
              this.$vux.toast.text('请输入正整数', 'center');
              return;
            }
          }
          if(this.useType==1){
            this.updatePayway(obj);
          }else{
            this.$emit('payWayComfirm' ,{payWay:this.currentIndex,creditDay:this.creditDay});
          }
          this.dialog=false;
        },
        close(){
          console.log("======")
          this.dialog=false;
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  .payway-dialog{
    overflow: scroll;
   // position: relative;
    padding: .66rem .0rem 0rem .55rem;
  .payway-title{
    text-align: left;
    font-size: .34rem;
    font-weight:bold;
    color:#333;
    margin-bottom: .6rem;
  }
  .payway{
    text-align: left;
  }
  .btn-select{
    color: #EF6C00 !important;
    border-color: #EF6C00 !important;
  }
  .btn-payway{
    margin-right: .1rem;
    border: 1px solid #ddd;
    color: #666;
    border-radius:.1rem;
    padding: .1rem .5rem;
  }
    /deep/ .weui-cells{
      margin-top: 0;
    }
  /deep/ .weui-cell{
    padding:.15rem 0rem;
  }
  /deep/ .weui-cells:before,/deep/ .weui-cells:after{
    border: none;
  }
  .sell-credit{
    min-height: 1.96rem;
    margin: 0rem 0rem;
  }
  .sell-credit-lable{
    font-size:.3rem;
    font-weight:500;
    color:#333;
  }
  /deep/ .weui-input{
    font-size:.3rem;
    font-weight:500;
    color:#333;
    padding-left: .1rem;
    padding-right: .1rem;
    text-align: center;
  }
  }
  .btn-comfirm{
    font-size:.34rem;
    font-weight:500;
    color:#fff;
    height:.84rem;
    background:rgba(82,125,217,1);
    border-radius:.42rem;
    margin: 0 .55rem  .4rem .55rem;
  }
  .icon-close{
    position: absolute;
    right: .1rem;
    padding: .2rem;
    color: #999;
    z-index: 9999;
  }
</style>
